import React, { useEffect, useState } from 'react';
import './Home.sass';

import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import {} from '../store/model/login';
import { useSelector, useDispatch } from 'react-redux';
import { permission, userlist } from '../utils/types/home';
import { useNavigate, Outlet } from 'react-router-dom';
import router from '../router';
import { color } from 'echarts';
import { calc } from 'antd/es/theme/internal';

const App: React.FC = () => {
  const { Header, Content, Footer, Sider } = Layout;
  const dispatch = useDispatch();
  const { userlist, permission } = useSelector((state: any) => state.login);

  // console.log(userlist, permission);
  // console.log(router.state.matches);
  const items1: MenuProps['items'] = JSON.parse(
    localStorage.getItem('permission'),
  ).map((key: permission) => ({
    key: key.path,
    label: ` ${key.name}`,
  }));
  const [now_path, setnow_path] = useState('/home/UserManagement');
  const items2: MenuProps['items'] = JSON.parse(
    localStorage.getItem('permission'),
  )
    .filter((key: permission) => key.path === now_path)[0]
    .children.map((index) => {
      // const key = String(index + 1);

      return {
        key: `${index.path}`,
        // icon: React.createElement(icon),
        label: ` ${index.name}`,

        // children: new Array(4).fill(null).map((_, j) => {
        //   const subKey = index * 4 + j + 1;
        //   return {
        //     key: subKey,
        //     label: `option${subKey}`,
        //   };
        // }),
      };
    });

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const navigate = useNavigate();

  return (
    <div style={{}}>
      <Layout>
        <Header
          style={{
            display: 'flex',
            alignItems: 'center',
            height: '0.5rem',
            backgroundColor: 'white',
            position: 'fixed',
            width: '100%',
            zIndex: 999,
            top: 0,
          }}
        >
          <div className='one' style={{ textAlign: 'center',width:'1.35rem' }}>
            <h1>视刻</h1>
          </div>
          {/* <div className="demo-logo" /> */}
          <Menu
            theme="light"
            mode="horizontal"
            defaultSelectedKeys={['/home/UserManagement']}
            items={items1}
            style={{ flex: 1, minWidth: 0, background: 'white',fontStyle:'red'}}
            onClick={(e) => {
              console.log(e.key, 111111111);
              navigate(e.key);
              setnow_path(e.key);
              // dispatch({ type: 'login/set_permission', payload: e.key });
            }}
          />
        </Header>
        <Content style={{ padding: '0 ' }}>
          <Breadcrumb style={{ margin: '0.16rem 0' }}>
            {/* {JSON.parse(localStorage.getItem('permission'))
              .filter((item) => item.path === now_path)[0]
              .children.map((item: permission, index) => {
                return (
                  <Breadcrumb.Item key={index}>{item.name}</Breadcrumb.Item>
                );
              })} */}
          </Breadcrumb>
          <Layout
            style={{
              // padding: '0.2rem 0',
              margin: '0.344rem 0 0 0',
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Sider
              style={{ background: colorBgContainer, flex: 1,height:"calc(100vh - 0.505rem)" }}
              width={200}
              className={now_path == '/home/index_home' ? 'noshow' : 'yesshow'}
            >
              {
                <Menu
                  mode="inline"
                  defaultSelectedKeys={['/home/ContentManagement/longVideo']}
                  defaultOpenKeys={['/home/ContentManagement/longVideo']}
                  style={{ height: '100%',background:'white',height:'100%' }}
                  items={items2}
                  onClick={(e) => {
                    navigate(e.key);
                    // dispatch({ type: 'login/set_permission', payload: e.key });
                  }}
                />
              }
            </Sider>
            <Content
              style={{
                padding: '0 0.24rem',
                minHeight: 28,
                height: 'auto',
                // height: 'calc(100vh - 1.5rem)',
                // background: 'red',
              }}
            >
              <Outlet></Outlet>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </div>
  );
};

export default App;
